<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta name="referrer" content="no-referrer"/>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客管理</title>
  <link href="../static/images/favicon.ico" th:href="@{/images/favicon.ico}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"  />
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../static/css/element-ui-index.css" th:href="@{/css/element-ui-index.css}">
  <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"  th:href="@{/lib/editormd/css/editormd.min.css}">


</head>
<body class="admin-body">
  <div id="app" class="d-flex flex-nowrap vh-100">

    <!--侧边栏-->
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-white " style="width: 280px;height: 100vh">
      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
        <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
        <span class="fs-4"><strong>ChenZhen</strong></span>
      </a>
      <hr>
      <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
          <a href="./dashboard.html" th:href="@{/admin/dashboard}" class="nav-link link-dark" aria-current="page">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
            仪表盘
          </a>
        </li>
        <li class="nav-item">
          <a href="./blogs.html" th:href="@{/admin/blogs}" class="nav-link active" aria-current="page">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
            文章管理
          </a>
        </li>
        <li>
          <a href="./types.html" th:href="@{/admin/types}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
            分类管理
          </a>
        </li>
        <li>
          <a href="./tags.html" th:href="@{/admin/tags}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
            标签管理
          </a>
        </li>
        <li>
          <a href="./friendlinks.html" th:href="@{/admin/friendlinks}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
            友链管理
          </a>
        </li>
        <li>
          <a href="./musics.html" th:href="@{/admin/musics}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
            音乐管理
          </a>
        </li>
        <li>
          <a href="./sys-configs.html" th:href="@{/admin/sys-configs}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
            系统配置管理
          </a>
        </li>
        <li>
          <a href="./users.html" th:href="@{/admin/users}" class="nav-link link-dark">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
            用户管理
          </a>
        </li>
        <li class="nav-item">
          <a href="./sync-blogs.html" th:href="@{/admin/sync-blogs}" class="nav-link link-dark" aria-current="page">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
            同步文章
          </a>
        </li>
      </ul>
      <hr>
      <div class="dropdown">
        <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
          <strong>mdo</strong>
        </a>
        <ul class="dropdown-menu text-small shadow">
          <li><a class="dropdown-item" href="#">New project...</a></li>
          <li><a class="dropdown-item" href="#">Settings</a></li>
          <li><a class="dropdown-item" href="#">Profile</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
      </div>
    </div>
    <div class="w-100 overflow-y-auto">
      <!--    顶部栏-->
      <header class="p-2 text-bg-dark">
        <div class="container">
          <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-end">
            <!--头像-->
            <img class="me-2 img-fluid rounded-5" width="40" height="40" src="../../static/images/me.jpg" th:src="@{${session.user.avatar}}">
            <!--名字-->
            <span class="me-3" th:src="@{${session.user.nickname}}" >ChenZhen</span>
            <div>
              <a href="#" @click="logout" class="btn btn-outline-light me-2">注销</a>
            </div>

          </div>
        </div>
      </header>
      <!--内容-->
      <div v-show="!dialogVisible" class="container-fluid mt-3 mb-3">
        <div class="card">
          <div class="card-body">

            <el-form size="" :model="searchForm" ref="searchForm" inline>

              <el-form-item label="博客标题">
                <el-input v-model="searchForm.title"></el-input>
              </el-form-item>

              <el-form-item label="分类">
                <el-input v-model="searchForm.typeName"></el-input>
              </el-form-item>

              <el-form-item label="标签">
                <el-input v-model="searchForm.tagName"></el-input>
              </el-form-item>

              <el-form-item label="发布状态">
                <el-select v-model="searchForm.published" placeholder="请选择">
                  <el-option label="已发布" value="1"></el-option>
                  <el-option label="草稿" value="0"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="推荐">
                <el-select v-model="searchForm.recommend" placeholder="请选择">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="版权">
                <el-select v-model="searchForm.copyright" placeholder="请选择">
                  <el-option label="原创" value="1"></el-option>
                  <el-option label="转载" value="0"></el-option>
                </el-select>
              </el-form-item>
              <!-- Search Button -->
              <el-form-item>
                <el-button type="primary" @click="fetchPage">搜索</el-button>
              </el-form-item>
            </el-form>

            <!-- 添加按钮 -->
            <el-button class="mb-3" type="primary" plain  @click="clickAdd">添加文章</el-button>
            <!-- 添加按钮 -->
            <el-button class="mb-3" type="primary" plain  @click="clickAdd">推送文章到百度</el-button>


            <!-- 表格 -->
            <el-table
                    ref="blogTable"
                    :data="list"
                    stripe
                    border
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
              <el-table-column
                      type="selection"
                      width="55">
              </el-table-column>

              <el-table-column
                      prop="id"
                      label="ID"
                      width="50">
              </el-table-column>


              <el-table-column width="220" label="图片" prop="firstPicture">
                <template slot-scope="scope">
                  <img :src="scope.row.firstPicture" alt="" width="100%">
                </template>
              </el-table-column>

              <el-table-column
                      prop="title"
                      label="标题"
              >
              </el-table-column>

              <el-table-column
                      prop="typeName"
                      label="分类"
              >
              </el-table-column>

              <el-table-column  label="标签" prop="tagList">
                <template slot-scope="scope">
                  <el-tag class="ms-2" v-for="tag in scope.row.tagList" :key="tag.id" effect="plain">{{ tag.name }}</el-tag>
                </template>
              </el-table-column>

              <el-table-column width="100" label="推荐" prop="recommend">
                <template slot-scope="scope">
                  {{ mapRecommend(scope.row.recommend) }}
                </template>
              </el-table-column>

              <el-table-column width="100" label="发布状态" prop="published">
                <template slot-scope="scope">
                  {{ mapPublished(scope.row.published) }}
                </template>
              </el-table-column>

              <el-table-column width="100" label="版权" prop="copyright">
                <template slot-scope="scope">
                  {{ mapCopyright(scope.row.copyright) }}
                </template>
              </el-table-column>

              <el-table-column
                      width="150"
                      prop="createTime"
                      label="创建时间">
              </el-table-column>

              <el-table-column
                      width="150"
                      prop="updateTime"
                      label="更新时间">
              </el-table-column>

              <el-table-column width="150" label="操作">
                <template slot-scope="scope">
                  <el-button  size="mini" @click="clickEdit(scope.row.id)">编辑</el-button>
                  <el-button  size="mini" type="success" @click="clickEdit(scope.row.id)">编辑</el-button>
                  <el-button  size="mini" type="danger" @click="clickDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>

            </el-table>

            <!-- 分页 -->
            <el-pagination
                    class="mt-5"
                    @current-change="handleCurrentChange"
                    :current-page="searchForm.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="searchForm.pageSize"
                    :total="total"
            ></el-pagination>
          </div>
        </div>

      </div>
    </div>

  </div>
</body>

  <script src="../../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
  <!-- import Vue before Element -->
  <script src="../../static/lib/vue.js"                   th:src="@{/lib/vue.js}"></script>
  <!-- import JavaScript -->
  <script src="../../static/lib/element-ui-index.js"      th:src="@{/lib/element-ui-index.js}"></script>
  <script src="../../static/lib/axios.min.js"             th:src="@{/lib/axios.min.js}"></script>
  <script src="../../static/lib/axiosInstance.js"         th:src="@{/lib/axiosInstance.js}"></script>
  <script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>

  <script >

      new Vue({
        el: '#app',
        data: function() {
          return {
            list: [],
            total: 0, // 总记录数
            searchForm: {
              pageNum: 1, // 当前页
              pageSize: 10  // 每页显示条数
            },
            // 表单显示
            dialogVisible: false,
            formLabelWidth: '120px',
            editForm:{
              recommend: false,
              shareStatement: false,
              commentabled: false,
              appreciation: false
            },
            tagList:[],
            typeList:[],
            multipleSelection: [],
            contentEditor:null
          }

        },
        methods:{
          mapRecommend(recommend){
            const recommendMap = {
              true: '是',
              false: '否'
            }
            return recommendMap[recommend] || '未知';
          },
          mapPublished(published){
            const publishedMap = {
              true: '是',
              false: '否'
            }
            return publishedMap[published] || '未知';
          },
          mapCopyright(copyright){
            const copyrightMap = {
              1: '原创',
              0: '转载'
            }
            return copyrightMap[copyright] || '未知';
          } ,
          //获取分页数据
          fetchPage(){
            this.list = [];
            axiosInstance.get(`/admin/blogs/page`,{
              params: this.searchForm
            }).then(res => {
              if (res.code === 20000){
                this.list = res.data.page.list;
                this.total = res.data.page.total;
              }

            })
          },
          fetchTagList(){
            axiosInstance.get(`/admin/tags/all`).then(res => {
              if (res.code === 20000){
                this.tagList = res.data.tagList;
              }
            })
          },
          fetchTypeList(){
            axiosInstance.get(`/admin/types/all`).then(res => {
              if (res.code === 20000){
                this.typeList = res.data.typeList;
              }
            })
          },
          // 分页切换
          handleCurrentChange(currentPage) {
            this.searchForm.pageNum = currentPage;
            this.fetchPage();
          },
          clickAdd(){
            //跳转
            location.href = '/admin/blogs/edit';
          },
          // 编辑
          clickEdit(id) {
            //跳转
            location.href = '/admin/blogs/edit?id=' + id;
          },
          //点击删除
          clickDelete(id){
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
              cancelButtonText: '取消',
              confirmButtonText: '确定',
              type: 'warning'
            }).then(() => {
              this.delete(id)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            })
          },
          // 删除
          delete(id) {
            axiosInstance.delete(`/admin/blogs/${id}`)
                    .then(() => {
                      this.fetchPage();
                    })
                    .catch(error => {
                      console.error(error);
                    });
          },
          logout(){
            axiosInstance.get('/admin/logout').then(res => {
              if (res.code === 20000){
                location.href = "/admin";
              }
            })
          },
          handleSelectionChange(val) {
            this.multipleSelection = val;
          }

        },
        mounted(){
          this.fetchPage()
          this.fetchTagList()
          this.fetchTypeList()
        },
        created(){
        }
      })




  </script>

</html>
